<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>好友的信息中心</title>
<link rel="icon" href="../img/BaiYi_title_icon.png" />
<link type="text/css" rel="stylesheet" href="../css/foundation.css" />
<link type="text/css" rel="stylesheet" href="../css/baiyi.css" />
<script type="text/javascript" src="../js/vendor/jquery.js"></script>
<script type="text/javascript" src="../js/foundation/foundation.js"></script>
<script type="text/javascript"
	src="../js/foundation/foundation.topbar.js"></script>
<script type="text/javascript"
	src="../js/foundation/foundation.offcanvas.js"></script>
<script type="text/javascript"
	src="../js/foundation/foundation.reveal.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$(document).foundation();
		$(document).foundation('topbar', 'reflow');
		$(document).foundation('offcanvas', 'reflow');
		$(document).foundation('revaeal', 'reflow');
	});
</script>
</head>
<body>
	<div class="off-canvas-wrap" data-offcanvas>
		<div class="inner-wrap">
			<nav class="top-bar" data-topbar role="navigation"
				data-options="sticky_on: large"
				style="overflow:hidden; border-bottom-right-radius: 1.8125rem;">
				<ul class="title-area">
					<li class="left-off-canvas-toggle menu-icon"><i class="icon"></i></li>

					<li class="toggle-topbar menu-icon"><a href="#"><span>好友</span></a></li>
				</ul>
				<section class="top-bar-section">
					</ul>
					<!--右边的导航区域 -->
					<ul class="right">
						<li><a href="index.html">首页</a></li>
						<li class="divider"></li>
						<!--条件查找点击设置-->
						<li><a href="#" data-reveal-id="SearchCondition">条件查找</a></li>
						<li class="divider"></li>
						<li class="has-form">
							<div class="row collapse">
								<div class="large-8 small-9 columns">
									<input type="text" placeholder="昵称查找">
								</div>
								<div class="large-4 small-3 columns">
									<a href="#" class="alert button expand small">查找</a>
								</div>
							</div>
						</li>
					</ul>
				</section>
			</nav>
			<!-- Off Canvas Menu 显示简易个人信息 -->
			<aside class="left-off-canvas-menu ">

				<div class="large-12 small-12 columns">
					<div class="user-portrait">
						<img src="../img/picture/01.jpg" style="width: 100%;"> <span>小宇哥</span>
					</div>

					<hr />
					<div class="icon-bar vertical  four-up">
						<a class="item" href="myhome.html"> <img
							src="../img/icon_svg/fi-home.svg"> <label>我的主页</label>
						</a> <a class="item" href="concern.html"> <img
							src="../img/icon_svg/fi-friends.svg"> <label>关注的人</label>
						</a> <a class="item" href="my_information_center.html"> <img
							src="../img/icon_svg/fi-mail.svg"> <label>信息中心</label>
						</a> <a class="item"> <img src="../img/icon_svg/fi-exit.svg">
							<label>退出</label>
						</a>
					</div>
				</div>
			</aside>
			<!---------------------弹窗全写在这里了---------------------->
			<div id="SearchCondition" class="reveal-modal" data-reveal>
				<h3>请选择用户信息</h3>
				<hr />
				<form action="" method="post">
					<div class="row">
						<div class="large-3 medium-6 columns">
							<select>
								<option value="中国" selected>所在地：中国</option>
								<option value="美国">所在地：美国</option>
								<option value="日本">所在地：日本</option>
							</select>
						</div>
						<div class="large-3 medium-6 columns">
							<select>
								<option value="职业">在校学生</option>
								<option value="职业">it民工</option>
								<option value="职业">教育机构</option>
							</select>
						</div>
						<div class="large-3 medium-6 columns">
							<select>
								<option value="不限">不限</option>
								<option value="women" selected>女</option>
								<option value="man">男</option>
							</select>
						</div>

						<div class="large-3 medium-6 columns">
							<select>
								<option value="0">不限</option>
								<option value="1">18岁以下</option>
								<option value="2" selected>18-22</option>
								<option value="3">23-26</option>
								<option value="4">27-35</option>
								<option value="5">35以上</option>
							</select>
						</div>
						<div class="large-3 medium-6 columns">
							<input type="submit" class="right  button small" value="查找" />
						</div>
					</div>
				</form>
			</div>
			<!----------------------------------------------------------------------------------------->
			<!---------------------------- 内容区域可替换------------------------------------------------>
			<!----------------------------------------------------------------------------------------->
			<!-----------------------左边的个人资料区域------------------->
			<div class="large-6  medium-7 columns information_center">
				<h4>他/她的资料</h4>
				<hr />
				<div class="row">
					<div class="small-12 columns">
						<img src="../img/picture/3.png" /> <a
							class="button small secondary right">加关注</a>
					</div>
					<div class="small-12 columns others_information">
						<ul>
							<li>昵称：<span>小宇哥</span></li>
							<li>性别：<span>女</span></li>
							<li>年龄：<span>21</span></li>
							<li>感情状况：<span>单身</span></li>
							<li>所在地：<span>天津-西青</span></li>
							<li>职业：<span>在校学生</span></li>
							<li>爱好：
								<ul class="inline-list">
									<li>唱歌</li>
									<li>学霸</li>
									<li>打牌</li>
									<li>运动</li>
								</ul>
							</li>
							<li>个人说明：
								<p>宇哥是个暖女哦...............哈哈哈...傻逼</p>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<!--------------------右边空间资料--------------->
			<div class="large-5 medium-4 information_center columns">
				<div class="row">
					<img src="../img/text3009.png" />
				</div>
				<h4>空间资料</h4>
				<hr />
				<div class="row">
					<div class="small-12 columns others_information">
						<ul>
							<li>空间名称：<span>酷酷小宇哥的空间</span></li>
							<li>空间说明：
								<p>欢迎*********的空间</p>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<!----------------------------------------------------------------------------------------->
			<!---------------------------- 内容区域------end-------------------------------------------->
			<!----------------------------------------------------------------------------------------->
			<!------------------页脚--------------------->
			<footer>
				<hr />
				<div class="row">

					<div class="large-6 columns">
						<p>© Copyright no one at all. Go to town.</p>
					</div>

					<div class="large-6 columns">
						<ul class="inline-list right">
							<li><a href="#">联系我们</a></li>
							<li><a href="#">关注我们</a></li>
							<li><a href="#">关于我们</a></li>
							<li><a href="#">加入我们</a></li>
						</ul>
					</div>

				</div>
			</footer>
			<!-- close the off-canvas menu -->
			<a class="exit-off-canvas"></a>
		</div>
	</div>
</body>
</html>